<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="bootstrap3\js\bootstrap.min.js">

        </script>
    </head>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fuild">
            <div class="navbar-header">
                <!--折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
                第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，
                指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素  !-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span> <!--其实就是按钮的三个横线 !-->
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>

                <a class="navbar-brand" href="#">
                    <img title="log" alt="Brand" src="headertitle.jpg" >
                </a>
            </div>
            <!--如果想给导航栏添加折叠，必须把内容包含在 collapse navbar-collapse中  !-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a>link</a></li>
                    <li><a>link</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">
                     dropdown<span class="caret"></span>

                     </a>
                        <ul class="dropdown-menu">
                            <li><a>1</a></li>
                            <li><a>2</a></li>
                            <li><a>3</a></li>
                        </ul>
                    </li>

                </ul>
                <!--导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，
                它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。
                使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。 !-->
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>xiafang</a></li>

                </ul>
            </div>
        </div>
    </nav>
    <div style="margin-top:70px">
        <h3>路径导航</h3>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Mssage</a></li>
            <li class="active">Show</li>
        </ol>
    </div>
    <div style="margin-bottom:70px;" class="container-fulid">
        <div class="col-md-6">
            <h3>分页</h3>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="disabled"><a><span>&laquo;</span></a></li>
                    <li><a>1</a></li>
                    <li class="active"><a>2</a></li>
                    <li><a>3</a></li>
                    <li><a>4</a></li>
                    <li><a>5</a></li>
                    <li><a>6</a></li>
                    <li><a><span>&raquo;</span></a></li>
                </ul>
            </nav>

            <nav aria-label="Page navigation">
                <ul class="pagination pagination-lg">
                    <li class="disabled"><a><span>&laquo;</span></a></li>
                    <li><a>1</a></li>
                    <li class="active"><a>2</a></li>
                    <li><a>3</a></li>
                    <li><a>4</a></li>
                    <li><a>5</a></li>
                    <li><a>6</a></li>
                    <li><a><span>&raquo;</span></a></li>
                </ul>
            </nav>

            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">
                    <li class="disabled"><a><span>&laquo;</span></a></li>
                    <li><a>1</a></li>
                    <li class="active"><a>2</a></li>
                    <li><a>3</a></li>
                    <li><a>4</a></li>
                    <li><a>5</a></li>
                    <li><a>6</a></li>
                    <li><a><span>&raquo;</span></a></li>
                </ul>
            </nav>
            <h3>翻页</h3>
            <nav aria-label="pagging">
                <ul class="pager">
                    <li><a>上一页</a></li>
                    <li><a>下一页</a></li>
                </ul>
            </nav>
            <h4>对齐链接</h4>
            <nav aria-label="pagging">
                <ul class="pager">
                    <li class="previous"><a>上一页</a></li>
                    <li class="next"><a>下一页</a></li>
                </ul>
            </nav>
            <h4>对齐链接--可选的禁用状态</h4>
            <nav aria-label="pagging">
                <ul class="pager">
                    <li class="previous disabled"><a>上一页</a></li>
                    <li class="next"><a>下一页</a></li>
                </ul>
            </nav>
            <h3>警告框</h3>
            <div class="alert alert-success">执行成功！</div>
            <div class="alert alert-info">操作信息！</div>
            <div class="alert alert-warning">提醒！</div>
            <div class="alert alert-danger">警告！</div>

            <div class="alert alert-danger alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">&times;</button> 可关闭的警告！
            </div>
            <div class="alert alert-info">警告框中的链接！
                <a class="alert-link">www.baidu.com</a>
            </div>
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h1>页头<small>--副标题</small></h1>
            </div>
            <h3>标签</h3>
            <span class="label label-default">default</span>
            <span class="label label-primary">primary</span>
            <span class="label label-success">success</span>
            <span class="label label-info">info</span>
            <span class="label label-warning">warning</span>
            <span class="label label-danger">danger</span>
            <h3>徽章</h3>
            <a>跳转链接<span class="budge">*</span></a>
            <button class="btn btn-success">提交<span class="budge">+</span></button>
            <div class="jumbotron">
                <h1>巨幕</h1>
                <p>内容,sdfadfadfadfasdfaaaaaaaa,sdfasdfasdfasdfasdfas,asdfasdfasdfasdfasdfasdf</p>
            </div>
            <div class="row">
                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail">
                        <img style="height:180px;background-color:gray;">
                        <h3>商品1</h3>
                        <p>商品描述</p>
                    </div>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail"><img style="height:180px">
                        <h3>商品2</h3>
                        <p>商品描述</p>
                    </div>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail"><img style="height:180px">
                    <p>商品3</p>
                    <p>商品描述</p></a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail"><img style="height:180px">
                     <p>商品4</p>
                    <p>商品描述</p></a>
                </div>
            </div>
            <h3>进度条</h3>
            <h4>普通进度条-带百分比</h4>
            <div class="progress">
                <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:50%;">50%</div>
            </div>
            <h4>普通进度条--最小值</h4>
            <div class="progress">
                <div class="progress-bar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;">0%</div>
            </div>
            <div class="progress">
                <div class="progress-bar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:2%;min-width:3em;">2%</div>
            </div>
            <h4>不同颜色的进度条</h4>
            <div class="progress">
                <div class="progress-bar progress-bar-success" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:20%;"></div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-info" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:60%;"></div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="width:30%;">条纹效果</div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-danger progress-bar-striped active" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="width:80%;">动画效果</div>
            </div>
            <h4>堆叠进度条</h4>
            <div class="progress">
                <div class="progress-bar progress-bar-info progress-bar-striped" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="width:20%;"></div>
                <div class="progress-bar progress-bar-success progress-bar-striped active" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="width:50%;"></div>
                <div class="progress-bar progress-bar-danger progress-bar-striped" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                    style="width:10%;"></div>
            </div>
        </div>

    </div>


    <nav class=" navbar navbar-inverse navbar-fixed-bottom hidden">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="nav-bottom-id1">
            <span style="color:white">底部导航</span>
        </button>
        </div>
        <div class="collapse navbar-collapse container-fuild " id="nav-bottom-id1">
            <ul class="nav navbar-nav">
                <li><a>返回首页</a></li>
                <li><a>查询</a></li>
                <li class="active"><a>退出</a></li>
            </ul>
        </div>
    </nav>